<template>
    <div class="chart">
        <!-- <basic-container> -->
            <div class="list-con">
                <div class="con-main">
                    <div class="app-con">
                        <h2>运营看板</h2>
                        <div class="app-pie">

                        </div>
                        <div class="app-pie" v-if="show">
                            <pie1 :list="deviceDate[0]"></pie1>
                            <pie2 :list="deviceDate[1]"></pie2>
                            <pie3 :list="deviceDate[2]"></pie3>
                            <!-- <avue-echart-pie :option="option" :data="data" width="245" height="245"></avue-echart-pie>
                            <avue-echart-pie :option="option" :data="data" width="245" height="245"></avue-echart-pie>
                            <avue-echart-pie :option="option" :data="data" width="245" height="245"></avue-echart-pie> -->
                        </div>
                    </div>
                </div>
                <div class="con-aside">
                    <h2>设备报警信息<router-link :to="{path: '/business/alarmlog'}">更多>></router-link></h2>
                    <div class="alarm-list">
                        <ul>
                            <li class="name">
                                <span>大棚名称</span>
                                <span>设备名称</span>
                                <span>报警名称</span>
                                <span>报警值</span>
                            </li>
                            <template v-if="list.length>0">
                                <li v-for="(item,index) in list" :key="index">
                                    <span>{{ item.groupName }}</span>
                                    <span>{{ item.deviceName }}</span>
                                    <span>{{ item.alarmName }}</span>
                                    <span>{{ item.value }}</span>
                                </li>
                            </template>

                        </ul>
                    </div>
                </div>
            </div>

            <div class="list-con list-con2">
                <div class="con-main con-main2">
                     <div class="app-con">
                        <h2>报警统计</h2>
                        <div class="app-pie">
                            <echarts v-if='show==true' :statistic="alarmnum"></echarts>
                        </div>
                     </div>
                </div>

        </div>
            
        <!-- </basic-container> -->
    </div>
</template>
<script>
import {listLogNum } from '@/api/business/alarm/alarmlog'
import {stasticAlarmByMonth} from '@/api/business/alarm/alarmlog'
import { table1 } from '@/api/echarts'
import echarts from './components/echarts'
import pie1 from './components/pie1'
import pie2 from './components/pie2'
import pie3 from './components/pie3'
export default {
    title: 'charts',
    data() {
        return{
            theme: '',
            list: [],
            show: false,
            deviceDate: [],
            alarmnum:[],
            data: [
                { value: 335, name: '已使用设备数量' },
                { value: 310, name: '未使用设备数量' },
            ],
            option: {
                width: '100%',
                title: '设备数量',
                subtitle: '纯属虚构',
                titleShow: true,
                labelShow:false,
                subtitleShow: true,
                radius: true,
                titleFontSize: 14,
                "barColor": [
                {
                    "color1": "#5B8FF9",
                },
                {
                    "color1": "rgba(0,0,0,0.15)",
                }]
            },
        config: {
          refreshTime: 5000,
          title: '柱状图',
          titleShow: true,
          titlePostion: '',
          titleFontSize: 14,
          titleColor: '#333',
          titleLink: "",
          info: '',
          gridX: 40,
          gridY: 200,
          xAxis: {
              position:'top',
          },
          nameColor: '#333',
          lineColor: '#333',
          xNameFontSize: 14,
          yNameFontSize: 14,
          labelShow: false,
          labelShowFontSize: 14,
          labelShowFontWeight: 300,
          yAxisInverse: false,
          xAxisInverse: false,
          xAxisShow: true,
          yAxisShow: true,
          xAxisSplitLineShow: false,
          yAxisSplitLineShow: true,
          xAxis:{
              Position: 'top',
          },
          refresh: 3000,
          barWidth: 50,
          barColor: [{
            color1: '#5B8FF9',
            postion1: 10
          }],
          barMinHeight: 0,
        }
      }
    },
    components: {
        pie1,
        pie2,
        pie3,
        echarts
    },
    created(){
        this.initData()
        this.warningList()
        this.initAlarmnum()
        this.init2()
    },
    methods: {
        async initData(){
            const res = await table1();
            console.log(res)
            this.deviceDate = res.data
        },

        //初始化柱状图数据
        async initAlarmnum(){
            const res = await stasticAlarmByMonth();
            this.alarmnum = res.data
            this.show = true
        },

        //告警列表
        async warningList(){
            const res = await listLogNum(5)
            this.list = res.data
        }, 

        init2() {

        console.log("ws://localhost:8080"+"/ws/warning")

        this.ws = new WebSocket("ws://localhost:8080"+"/ws/warning")
                
        //监听是否连接成功
        this.ws.onopen = ()=> {
             console.log('ws连接状态：' +this.ws.readyState);
             //连接成功则发送一个数据
             this.ws.send('连接成功');
          }
          
        //接听服务器发回的信息并处理展示
        this.ws.onmessage = (message)=> {  
             this.list[this.list.length]=JSON.parse(message.data)
             console.log("6666666",this.list)  
             this.addArr()   
         }
         
         //监听连接关闭事件
         this.ws.onclose = ()=>{
            //监听整个过程中websocket的状态
            console.log('ws连接状态：' + this.ws.readyState);
         }
         
         //监听并处理error事件
         this.ws.onerror = function(error) {
            console.log(error);
         }
        },
        beforeDestroy: function () {
        // 页面离开时断开连接,清除定时器
        this.disconnect();
        },

        addArr() {
            //只展示最近的8条报警
            if(this.list.length>=5){
                this.list.splice(0,1)
            }
	    }
    }
}
</script>
<style lang="scss" scoped>
.app-container{
    margin: 20px auto;
}
.app-con{
    .app-pie{
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-around;
        // height: 300px;
        padding-top: 20px;
    }
}
.list-con{
    height: 360px;
    margin: 20px;
    display: flex;
    align-items: space-between;
    justify-content: space-between;
    overflow: hidden;
    h2{
        font-size: 16px;
        height: 50px;
        line-height: 50px;
        border-bottom: solid 1px #ddd;
        padding: 0 20px;
        display: flex;
        align-items: space-between;
        justify-content: space-between;
        a{
            font-size: 12px;
            font-style: normal;
            color: #409EFF;
        }
    }
    .con-main{
        width: 66%;
        border: solid 1px #ddd;
        &.con-main2{
            width: 100%;
        }
    }
    .con-aside{
        width: 33%;
        border: solid 1px #ddd;
        .alarm-list{
            width: 100%;
            margin: 0 auto;
            ul{
                height: 420px;
                overflow: auto;
                font-size: 14px;
                margin-top: 15px;
                padding: 0 14px;
                li{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    height: 48px;
                    line-height: 48px;
                    padding: 0 14px;
                    border-bottom: solid 1px #ddd;
                    &.name{
                        height: 42px;
                        line-height: 42px;
                        background: rgba(0, 0, 0, 0.02);
                        border-bottom: none;
                    }
                }
            }
        }
        .sys-list{
            font-size: 14px;
            margin: 16px 20px;
            label{
                color: #000;
            }
            p{
                color: #666;
                height: 60px;
                line-height: 20px;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }
        }
        
    }
}
.list-con2{
    height: 400px;
}
.nodata{
    margin: 50px auto;
    text-align: center;
    font-size: 14px;
    img{
      width: 70px;
      height: auto;
    }
  }

</style>
<style lang="scss">
  .chart {
    height: 100%;
    .basic-container{
        margin-top: 20px;
    }
    .el-card__body {
    padding: 0;
    }


    
  }
</style>